<template>
  <div class="body">
    <div class="body_main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a @click.stop="goBack">
            <el-button
              icon="el-icon-arrow-left"
              size="mini"
              circle
              style="margin-right: 12px"
            ></el-button>
            数据资产管理
          </a>
        </el-breadcrumb-item>
        <el-breadcrumb-item
          style="height: 28px; line-height: 28px"
          >{{
            bimType === 1
              ? '楼栋'
              : bimType === 2
              ? '管廊'
              : '基础'
          }}数据配置-{{ dataName }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="line"></div>
      <div class="tab">
        <div class="body_left_tab">
          <div
            class="tab_item"
            :class="
              tabActive === item.type
                ? 'tab_item_active'
                : ''
            "
            @click="tabClick(item.type)"
            v-for="(item, index) in tabList"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="buttons">
          <div @click="upload">
            <Icon name="daoru"></Icon>
            导入数据
          </div>
          <div @click="Dropdown">
            <Icon name="daochu"></Icon>
            导出数据
          </div>
          <el-button @click="saveAll">保存</el-button>
        </div>
      </div>
      <div class="line"></div>
      <div class="asset_info" v-if="tabActive === '1'">
        <div class="building_info">
          <div class="building_info_top">
            <div class="building_info_title">
              <div class="building_info_title_left"></div>
              {{
                bimType === 1
                  ? '楼栋'
                  : bimType === 2
                  ? '管廊'
                  : '基础'
              }}信息
            </div>
            <div class="building_info_control control">
              <div class="add">
                <span
                  class="el-icon-plus"
                  @click.stop="buildingInfoAdd"
                ></span>
              </div>
              <i
                @click.stop="buildingInfoDelete"
                class="el-icon-delete"
                style="
                  font-size: 24px;
                  float: right;
                  margin-right: 20px;
                  color: #ff5b5b;
                  line-height: 36px;
                  cursor: pointer;
                "
              ></i>
              <!--              <i-->
              <!--                @click.stop="buildingInfoAdd"-->
              <!--                class="el-icon-circle-plus-outline"-->
              <!--                style="-->
              <!--                  font-size: 24px;-->
              <!--                  float: right;-->
              <!--                  margin-right: 10px;-->
              <!--                  color: #00baff;-->
              <!--                  line-height: 36px;-->
              <!--                "-->
              <!--              ></i>-->
            </div>
          </div>
          <div class="building_info_content">
            <el-table
              border
              ref="multipleTable"
              :data="buildingInfo"
              tooltip-effect="dark"
              style="width: 100%"
              :header-cell-style="{ background: '#f2f6f8' }"
              :row-class-name="rowClassName"
              @selection-change="
                buildingHandleSelectionChange
              "
            >
              <el-table-column
                width="70"
                type="selection"
                header-show="false"
              >
              </el-table-column>
              <el-table-column
                label="序号"
                width="132"
                prop="orderNum"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="属性名称"
                width="442"
                header-
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.typeName"
                    type="text"
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="属性内容"
                header-
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.typeContent"
                    type="text"
                    placeholder=""
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div
          class="floor_info"
          style="margin-top: 12px"
          v-if="bimType !== 3"
        >
          <div class="floor_info_top">
            <div class="floor_info_title">
              <div class="floor_info_title_left"></div>
              {{ bimType === 1 ? '楼层' : '管廊分段' }}信息
            </div>
            <div class="floor_info_control control">
              <div class="add">
                <span
                  class="el-icon-plus"
                  @click.stop="floorInfoAdd"
                ></span>
              </div>
              <i
                @click.stop="floorInfoDelete"
                class="el-icon-delete"
                style="
                  font-size: 24px;
                  float: right;
                  margin-right: 20px;
                  color: #ff5b5b;
                  line-height: 36px;
                  cursor: pointer;
                "
              ></i>
              <!--              <i-->
              <!--                @click.stop="floorInfoAdd"-->
              <!--                class="el-icon-circle-plus-outline"-->
              <!--                style="-->
              <!--                  font-size: 24px;-->
              <!--                  float: right;-->
              <!--                  margin-right: 10px;-->
              <!--                  color: #00baff;-->
              <!--                  line-height: 36px;-->
              <!--                "-->
              <!--              ></i>-->
            </div>
          </div>
          <div
            class="floor_info_content"
            v-if="bimType === 1"
          >
            <el-table
              border
              ref="multipleTable"
              :data="floorInfo"
              tooltip-effect="dark"
              style="width: 100%"
              :header-cell-style="{ background: '#f2f6f8' }"
              @selection-change="floorHandleSelectionChange"
            >
              <el-table-column
                width="70"
                type="selection"
                header-show="false"
              >
              </el-table-column>
              <el-table-column
                label="楼层"
                width="132"
                sortable
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.floor"
                    oninput="value=value.replace(/[^0-9.]/g, '')"
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="企业名称"
                width="442"
                header-
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.name"
                    type="text"
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="企业人数"
                width="132"
                sortable
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.total"
                    oninput="value=value.replace(/[^0-9.]/g, '')"
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column label="主导产业" width="132">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.leadIndustry"
                    type="text"
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="所属产业链"
                width="132"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.industryChain"
                    type="text"
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="产业链环节"
                header-
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.industryPart"
                    type="text"
                    placeholder=""
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div
            class="floor_info_content"
            v-if="bimType === 2"
          >
            <el-table
              border
              ref="multipleTable"
              :data="pipeInfo"
              tooltip-effect="dark"
              style="width: 100%"
              :header-cell-style="{ background: '#f2f6f8' }"
              @selection-change="floorHandleSelectionChange"
            >
              <el-table-column
                width="60"
                type="selection"
                header-show="false"
              >
              </el-table-column>
              <el-table-column
                label="分段"
                width="108"
                sortable
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.pipeSection"
                    oninput="value=value.replace(/[^0-9.]/g, '')"
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="类型"
                width="251"
                header-
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.pipeType"
                    type="text"
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="长度"
                width="194"
                sortable
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.length"
                    oninput="value=value.replace(/[^0-9.]/g, '')"
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="直径"
                width="185"
                sortable
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.diameter"
                    oninput="value=value.replace(/[^0-9.]/g, '')"
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column label="通风口" width="186">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.ventilator"
                    type="text"
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column label="吊装口" width="163">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.installer"
                    type="text"
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="逃生口"
                header-
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.exits"
                    type="text"
                    placeholder=""
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="device_info" v-if="tabActive === '2'">
        <div class="monitor_device">
          <div class="monitor_device_top">
            <div class="monitor_device_title">
              【共{{ monitorDeviceInfo.length }}个监测设备】
            </div>
            <div class="monitor_device_control control">
              <div class="add">
                <span
                  class="el-icon-plus"
                  @click.stop="deviceInfoAdd"
                ></span>
              </div>
              <i
                @click.stop="deviceInfoDelete"
                class="el-icon-delete"
                style="
                  font-size: 24px;
                  float: right;
                  margin-right: 20px;
                  color: #ff5b5b;
                  line-height: 36px;
                  cursor: pointer;
                "
              ></i>
              <!--              <i-->
              <!--                @click.stop="deviceInfoAdd"-->
              <!--                class="el-icon-circle-plus-outline"-->
              <!--                style="-->
              <!--                  font-size: 24px;-->
              <!--                  float: right;-->
              <!--                  margin-right: 10px;-->
              <!--                  color: #00baff;-->
              <!--                  line-height: 36px;-->
              <!--                "-->
              <!--              ></i>-->
            </div>
          </div>
          <div class="device_info_table">
            <div
              v-for="(item, index) in monitorDeviceInfo"
              :key="index"
            >
              <div class="monitor_device_content">
                <el-table
                  ref="deviceTable"
                  :data="[item.bimEquipmentManage]"
                  tooltip-effect="dark"
                  style="width: 100%"
                  :header-cell-style="{
                    background: '#DBE5F1'
                  }"
                  @selection-change="
                    deviceInfoChange($event, index)
                  "
                >
                  <el-table-column
                    width="28"
                    type="selection"
                    header-show="false"
                  >
                  </el-table-column>
                  <el-table-column
                    :label="`设备${index + 1}`"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <div>
                        <div
                          class="monitor_device_property"
                        >
                          <div>设备名称</div>
                          <el-input
                            v-model="scope.row.name"
                            type="text"
                            placeholder=""
                          />
                          <div>设备类型</div>
                          <el-input
                            v-model="scope.row.type"
                            type="text"
                            placeholder=""
                          />
                          <div>设备空间地址(x,y,z)</div>
                          <el-input
                            v-model="scope.row.location"
                            type="text"
                            placeholder=""
                          />
                        </div>
                        <div class="detection_index">
                          <div class="detection_index_top">
                            <div
                              class="detection_index_title"
                            >
                              检测指标
                            </div>
                            <div
                              class="detection_index_control control"
                            >
                              <div class="add">
                                <span
                                  class="el-icon-plus"
                                  @click.stop="
                                    monitorDeviceInfoAdd(
                                      index
                                    )
                                  "
                                ></span>
                              </div>
                              <i
                                @click.stop="
                                  monitorDeviceInfoDelete(
                                    index
                                  )
                                "
                                class="el-icon-delete"
                                style="
                                  font-size: 24px;
                                  float: right;
                                  margin-right: 20px;
                                  color: #ff5b5b;
                                  line-height: 36px;
                                  cursor: pointer;
                                "
                              ></i>
                              <!--                              <i-->
                              <!--                                @click.stop="-->
                              <!--                                  monitorDeviceInfoAdd(-->
                              <!--                                    index-->
                              <!--                                  )-->
                              <!--                                "-->
                              <!--                                class="el-icon-circle-plus-outline"-->
                              <!--                                style="-->
                              <!--                                  font-size: 24px;-->
                              <!--                                  float: right;-->
                              <!--                                  margin-right: 10px;-->
                              <!--                                  color: #00baff;-->
                              <!--                                  line-height: 36px;-->
                              <!--                                "-->
                              <!--                              ></i>-->
                            </div>
                          </div>
                          <div
                            class="detection_index_content"
                          >
                            <el-table
                              border
                              ref="multipleTable"
                              :data="
                                item.bimEquipmentInfoList
                              "
                              tooltip-effect="dark"
                              style="width: 100%"
                              :header-cell-style="{
                                background: '#f2f6f8'
                              }"
                              :row-class-name="rowClassName"
                              @selection-change="
                                monitorHandleSelectionChange
                              "
                            >
                              <el-table-column
                                width="70"
                                type="selection"
                                header-show="false"
                              >
                              </el-table-column>
                              <el-table-column
                                label="序号"
                                width="109"
                                prop="orderNum"
                              >
                              </el-table-column>
                              <el-table-column
                                label="指标名称"
                                width="300"
                                header-
                              >
                                <template
                                  slot-scope="scope"
                                >
                                  <el-input
                                    v-model="scope.row.name"
                                    type="text"
                                    placeholder=""
                                  />
                                </template>
                              </el-table-column>
                              <el-table-column
                                label="数据地址"
                                width="620"
                                header-
                              >
                                <template
                                  slot-scope="scope"
                                >
                                  <el-input
                                    v-model="
                                      scope.row.dataAddress
                                    "
                                    type="text"
                                    placeholder=""
                                  />
                                </template>
                              </el-table-column>
                              <el-table-column
                                label="指标阈值"
                                header-
                                show-overflow-tooltip
                              >
                                <template
                                  slot-scope="scope"
                                >
                                  <el-input
                                    v-model="
                                      scope.row.value
                                    "
                                    type="text"
                                    placeholder=""
                                  />
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="zoning" v-if="tabActive === '3'">
        <div class="zoning_top">
          <div class="zoning_title">
            【共{{ zoningInfo.length }}个功能分区】
          </div>
          <div class="zoning_control control">
            <div class="add">
              <span
                class="el-icon-plus"
                @click.stop="zoningInfoAdd"
              ></span>
            </div>
            <i
              @click.stop="zoningInfoDelete"
              class="el-icon-delete"
              style="
                font-size: 24px;
                float: right;
                margin-right: 20px;
                color: #ff5b5b;
                line-height: 36px;
                cursor: pointer;
              "
            ></i>
            <!--            <i-->
            <!--              @click.stop="zoningInfoAdd"-->
            <!--              class="el-icon-circle-plus-outline"-->
            <!--              style="-->
            <!--                font-size: 24px;-->
            <!--                float: right;-->
            <!--                margin-right: 10px;-->
            <!--                color: #00baff;-->
            <!--                line-height: 36px;-->
            <!--              "-->
            <!--            ></i>-->
          </div>
        </div>
        <div class="zoning_content">
          <el-table
            border
            ref="multipleTable"
            :data="zoningInfo"
            tooltip-effect="dark"
            style="width: 100%"
            :header-cell-style="{ background: '#f2f6f8' }"
            :row-class-name="rowClassName"
            @selection-change="zoningHandleSelectionChange"
          >
            <el-table-column
              width="62"
              type="selection"
              header-show="false"
            >
            </el-table-column>
            <el-table-column
              label="序号"
              width="85"
              prop="orderNum"
            >
            </el-table-column>
            <el-table-column
              label="功能分区名称"
              width="266"
              header-
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.name"
                  type="text"
                  placeholder=""
                />
              </template>
            </el-table-column>
            <el-table-column
              label="分区描述"
              width="496"
              header-
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.description"
                  type="text"
                  placeholder=""
                />
              </template>
            </el-table-column>
            <el-table-column
              label="功能分区类型"
              width="239"
              header-
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.type"
                  type="text"
                  clearable
                />
              </template>
            </el-table-column>
            <!--            <el-table-column-->
            <!--              v-if="bimType === 1"-->
            <!--              label="所在楼层"-->
            <!--              width="239"-->
            <!--              header--->
            <!--            >-->
            <!--              <template slot-scope="scope">-->
            <!--                <el-select-->
            <!--                  v-model="scope.row.floorLocationId"-->
            <!--                  placeholder="请选择楼层"-->
            <!--                  multiple-->
            <!--                >-->
            <!--                  <el-option-->
            <!--                    v-for="item in floors"-->
            <!--                    :key="item.value"-->
            <!--                    :label="item.label"-->
            <!--                    :value="item.value"-->
            <!--                  >-->
            <!--                    &lt;!&ndash;                    <el-checkbox :checked='item.check' @change='checkChange(item)'>&ndash;&gt;-->
            <!--                    &lt;!&ndash;                    </el-checkbox>&ndash;&gt;-->
            <!--                    {{ item.label }}-->
            <!--                  </el-option>-->
            <!--                </el-select>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <!--            <el-table-column-->
            <!--              v-if="bimType === 2"-->
            <!--              label="所在分段"-->
            <!--              width="239"-->
            <!--              header--->
            <!--            >-->
            <!--              <template slot-scope="scope">-->
            <!--                <el-select-->
            <!--                  v-model="scope.row.floorLocationId"-->
            <!--                  placeholder="请选择分段"-->
            <!--                  multiple-->
            <!--                >-->
            <!--                  <el-option-->
            <!--                    v-for="item in pipes"-->
            <!--                    :key="item.value"-->
            <!--                    :label="item.label"-->
            <!--                    :value="item.value"-->
            <!--                  >-->
            <!--                    &lt;!&ndash;                    <el-checkbox :checked='item.check' @change='checkChange(item)'>&ndash;&gt;-->
            <!--                    &lt;!&ndash;                    </el-checkbox>&ndash;&gt;-->
            <!--                    {{ item.label }}-->
            <!--                  </el-option>-->
            <!--                </el-select>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column
              v-if="bimType === 3"
              label="所在区域"
              width="239"
              header-
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.floorLocation"
                  type="text"
                  placeholder=""
                />
              </template>
            </el-table-column>
            <el-table-column
              label="图标"
              width="141"
              header-
              style="height: 40px"
            >
              <template
                slot-scope="scope"
                style="height: 40px"
              >
                <label
                  >{{
                    scope.row.fileInfos
                      ? scope.row.fileInfos[0].fileName
                      : scope.row.fileName
                  }}
                </label>
              </template>
            </el-table-column>
            <el-table-column
              label="图标"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="uploadIcon(scope.row)"
                  style="color: #00baff; font-weight: 400"
                  >上传
                </el-button>
                <el-button
                  type="text"
                  @click="deleteRole(scope.row)"
                  style="color: #ff5b5b; font-weight: 400"
                  >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  buildingInfoQuery,
  floorInfoQuery,
  assetSave,
  deviceInfoQuery,
  galleryInfoQuery,
  zoningQuery,
  buildingInfoDelete,
  deviceInfoOutDelete,
  floorInfoDelete,
  galleryInfoDelete,
  zoningDelete,
  deviceInfoDelete,
  exportData,
  zoningFileAdd,
  zoningFileDelete
} from '@/api/assets'
import { noticeFileUpload } from '@/api/wisdomBuild'
import Icon from '@/components/icon'

export default {
  name: 'assetAllocation',
  components: { Icon },
  data() {
    return {
      assetsInfo: {},
      pickId: '',
      dataName: '',
      tabActive: '1',
      tabList: [
        { name: '资产信息', type: '1' },
        { name: '监控设备', type: '2' },
        { name: '功能分区', type: '3' }
      ],
      buildingInfo: [],
      buildingMultipleSelection: [],
      floorInfo: [],
      pipeInfo: [],
      floorMultipleSelection: [],
      floors: [],
      pipes: [],
      checkedFloors: [],
      monitorDeviceInfo: [],
      monitorIndicator: [
        {
          indexName: '指标名称',
          dataAddress: '数据地址',
          threshold: '阈值'
        },
        {
          indexName: '指标名称2',
          dataAddress: '数据地址2',
          threshold: '阈值2'
        }
      ],
      zoningInfo: [],
      deviceNumber: '2',
      zoningNumber: '1',
      bimType: 1,
      deviceSelectIndexs: [],
      deviceMultipleSelection: [],
      monitorDeviceMultipleSelection: [],
      zoningMultipleSelection: []
    }
  },
  mounted() {
    this.assetsInfo = JSON.parse(
      localStorage.getItem('modelInfoAssetSetting')
    )
    // this.assetsInfo = JSON.parse(this.$route.query.data)
    this.dataName = this.assetsInfo.sourceName
    this.pickId = this.assetsInfo.pkid
    this.bimType = this.assetsInfo.bimType
    this.buildingMounted()
    this.floorMounted()
    this.deviceMounted()
    this.zoningMounted()
  },
  methods: {
    buildingMounted() {
      buildingInfoQuery({ pkid: this.pickId }).then(
        (res) => {
          if (res.success) {
            this.buildingInfo = res.data
            if (!this.buildingInfo.length) {
              this.buildingInfoAdd()
            }
          }
        }
      )
    },
    floorMounted() {
      switch (this.bimType) {
        case 1:
          floorInfoQuery({ pkid: this.pickId }).then(
            (res) => {
              if (res.success) {
                this.floorInfo = res.data
                this.floors = []
                this.floorInfo.forEach((item) => {
                  const obj = {
                    value: item.pkid,
                    label: item.floor + 'f',
                    check: false
                  }
                  this.floors.push(obj)
                })
                const temp = {}
                this.floors = this.floors.reduce(
                  (item, next) => {
                    // eslint-disable-next-line no-unused-expressions
                    temp[next.label]
                      ? ''
                      : (temp[next.label] =
                          true && item.push(next))
                    return item
                  },
                  []
                )
                if (!this.floorInfo.length) {
                  this.floorInfoAdd()
                }
              }
            }
          )
          break
        case 2:
          galleryInfoQuery({ pkid: this.pickId }).then(
            (res) => {
              if (res.success) {
                this.pipeInfo = res.data
                this.pipes = []
                this.pipeInfo.forEach((item) => {
                  const obj = {
                    value: item.pkid,
                    label: item.pipeSection + 'd',
                    check: false
                  }
                  this.pipes.push(obj)
                })

                const temp = {}
                this.pipes = this.pipes.reduce(
                  (item, next) => {
                    // eslint-disable-next-line no-unused-expressions
                    temp[next.label]
                      ? ''
                      : (temp[next.label] =
                          true && item.push(next))
                    return item
                  },
                  []
                )
                if (!this.pipeInfo.length) {
                  this.floorInfoAdd()
                }
              }
            }
          )
          break
        default:
          break
      }
    },
    deviceMounted() {
      deviceInfoQuery({ pkid: this.pickId }).then((res) => {
        if (res.success) {
          this.monitorDeviceInfo = res.data
          if (!this.monitorDeviceInfo.length) {
            this.deviceInfoAdd()
          }
        }
      })
    },
    zoningMounted() {
      zoningQuery({ pkid: this.pickId }).then((res) => {
        if (res.success) {
          this.zoningInfo = res.data
          this.zoningInfo.forEach((item) => {
            if (this.bimType !== 3) {
              if (item.floorLocation) {
                item.floorLocationId =
                  item.floorLocationId.split(',')
              }
            }
            item.fileName = ''
          })
          if (!this.zoningInfo.length) {
            this.zoningInfoAdd()
          }
        }
      })
    },
    goBack() {
      this.$router.push('/mochaITOM/assetsManagement')
    },
    rowClassName({ row, rowIndex }) {
      row.orderNum = rowIndex + 1
    },
    buildingInfoAdd() {
      this.buildingInfo.push({
        pkid: '',
        refId: '',
        typeName: '',
        typeContent: ''
      })
    },
    floorInfoAdd() {
      this.bimType === 1
        ? this.floorInfo.push({
            floor: '',
            name: '',
            total: '',
            leadIndustry: '',
            industryChain: '',
            industryPart: ''
          })
        : this.pipeInfo.push({
            pkid: '',
            refId: '',
            pipeSection: '',
            pipeType: '',
            length: null,
            diameter: null,
            ventilator: null,
            installer: null,
            exits: null
          })
    },
    deviceInfoAdd() {
      this.monitorDeviceInfo.push({
        bimEquipmentManage: {
          pkid: '',
          name: '',
          type: '',
          location: '',
          refId: ''
        },
        bimEquipmentInfoList: [
          {
            pkid: '',
            name: '',
            dataAddress: '',
            value: '',
            refId: ''
          }
        ]
      })
    },
    monitorDeviceInfoAdd(index) {
      this.monitorDeviceInfo[
        index
      ].bimEquipmentInfoList.push({
        pkid: '',
        name: '',
        dataAddress: '',
        value: '',
        refId: ''
      })
    },
    zoningInfoAdd() {
      this.zoningInfo.push({
        pkid: '',
        name: '',
        description: '',
        floorLocation: '',
        floorLocationId: '',
        fileIds: [],
        type: ''
      })
    },
    buildingInfoDelete() {
      this.buildingMultipleSelection.forEach((item) => {
        if (item.pkid) {
          buildingInfoDelete(item.pkid).then((res) =>
            console.log(res)
          )
        }
        const index = this.buildingInfo.indexOf(item)
        if (index > -1) {
          this.buildingInfo.splice(index, 1)
        }
      })
    },
    floorInfoDelete() {
      if (this.bimType === 1) {
        this.floorMultipleSelection.forEach((item) => {
          if (item.pkid) {
            floorInfoDelete(item.pkid).then((res) => {
              console.log(res)
            })
          }
          const index = this.floorInfo.indexOf(item)
          if (index > -1) {
            this.floorInfo.splice(index, 1)
          }
        })
      } else {
        this.floorMultipleSelection.forEach((item) => {
          if (item.pkid) {
            galleryInfoDelete(item.pkid).then((res) => {
              console.log(res)
            })
          }
          const index = this.pipeInfo.indexOf(item)
          if (index > -1) {
            this.pipeInfo.splice(index, 1)
          }
        })
      }
    },
    deviceInfoDelete() {
      this.deviceMultipleSelection.forEach((item) => {
        this.monitorDeviceInfo.forEach((res) => {
          if (res.bimEquipmentManage === item) {
            const index =
              this.monitorDeviceInfo.indexOf(res)
            if (index > -1) {
              this.monitorDeviceInfo.splice(index, 1)
            }
          }
        })

        if (item.pkid) {
          deviceInfoOutDelete(item.pkid).then((res) => {
            console.log(res)
          })
        }
      })
    },
    monitorDeviceInfoDelete(val) {
      this.monitorDeviceMultipleSelection.forEach(
        (item) => {
          if (item.pkid) {
            deviceInfoDelete(item.pkid).then((res) =>
              console.log(res)
            )
          }
          const index =
            this.monitorDeviceInfo[
              val
            ].bimEquipmentInfoList.indexOf(item)
          if (index > -1) {
            this.monitorDeviceInfo[
              val
            ].bimEquipmentInfoList.splice(index, 1)
          }
        }
      )
    },
    zoningInfoDelete() {
      this.zoningMultipleSelection.forEach((item) => {
        if (item.pkid) {
          zoningDelete(item.pkid).then((res) =>
            console.log(res)
          )
        }
        const index = this.zoningInfo.indexOf(item)
        if (index > -1) {
          this.zoningInfo.splice(index, 1)
        }
      })
    },
    buildingHandleSelectionChange(val) {
      this.buildingMultipleSelection = val
    },
    floorHandleSelectionChange(val) {
      this.floorMultipleSelection = val
    },
    // deviceChange(selection, index) {
    //   console.log(selection, index)
    // },
    deviceInfoChange(val, index) {
      const idx = this.deviceSelectIndexs.indexOf(index)
      if (val.length > 0 && idx <= -1) {
        this.deviceSelectIndexs.push(index)
        this.deviceMultipleSelection.push(val[0])
      } else if (val.length === 0 && idx > -1) {
        this.deviceSelectIndexs.splice(idx, 1)
        this.deviceMultipleSelection.splice(idx, 1)
      }
    },
    monitorHandleSelectionChange(val) {
      this.monitorDeviceMultipleSelection = val
    },
    zoningHandleSelectionChange(val) {
      this.zoningMultipleSelection = val
    },
    tabClick(type) {
      this.tabActive = type
    },
    // isChecked(item) {
    //   if (
    //     item.check &&
    //     this.checkedFloors.indexOf(item.value) === -1
    //   ) {
    //     this.checkedFloors.push(item.value)
    //   } else if (!item.check) {
    //     this.checkedFloors.forEach((elm, idx) => {
    //       if (elm == item.value) {
    //         this.checkedFloors.splice(idx, 1)
    //       }
    //     })
    //   }
    // },
    uploadIcon(row) {
      console.log(row)
      this.selectFile().then((res) => {
        const file = res.file
        const name = res.file.name
        const formData = new FormData()
        formData.append('file', file)
        noticeFileUpload(formData).then((res) => {
          if (row.pkid) {
            zoningFileAdd({
              functionId: row.pkid,
              fileId: res.data
            }).then(() => {
              this.zoningInfo[row.orderNum - 1].fileInfos =
                [{ pkid: res.data, fileName: name }]
            })
          } else {
            const temp = this.zoningInfo[row.orderNum - 1]
            temp.fileName = name
            this.$set(
              this.zoningInfo,
              row.orderNum - 1,
              temp
            )
            this.zoningInfo[row.orderNum - 1].fileIds = [
              res.data
            ]
          }
        })
      })
    },
    deleteRole(row) {
      if (row.pkid) {
        if (row.fileInfos) {
          zoningFileDelete(row.fileInfos[0].pkid).then(
            () => {
              this.zoningInfo[row.orderNum - 1].fileInfos =
                [{ fileName: '' }]
              // this.zoningMounted()
            }
          )
        }
      } else {
        const temp = this.zoningInfo[row.orderNum - 1]
        temp.fileName = ''
        this.$set(this.zoningInfo, row.orderNum - 1, temp)
      }
      this.zoningInfo[row.orderNum - 1].fileIds = [
        // res.data
      ]
    },
    Dropdown() {
      this.down(this.pickId, '数据资产')
    },
    saveAll() {
      const data = {
        pkid: this.pickId,
        bimInfoManageList: this.buildingInfo,
        bimBuildingManageList: this.floorInfo,
        bimEquipmentVoList: this.monitorDeviceInfo,
        bimFunctionManageList: this.zoningInfo
      }
      console.log(this.bimType)
      if (this.bimType === 1) {
        data.bimBuildingManageList = this.floorInfo
        data.bimFunctionManageList.forEach((res) => {
          res.floorLocationId =
            res.floorLocationId.toString()
          res.floorLocation = ''
        })
      } else if (this.bimType === 2) {
        data.bimPipeManageList = this.pipeInfo
        data.bimFunctionManageList.forEach((res) => {
          res.floorLocationId =
            res.floorLocationId.toString()
          res.floorLocation = ''
        })
      }

      console.log(data)
      assetSave(data)
        .then((res) => {
          if (res.success) {
            this.$message.success('保存成功')
            this.goBack()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    down(pickId, name) {
      if (pickId) {
        exportData({ pkid: pickId }).then((res) => {
          console.log(res)
          const fileName = name + '.xlsx'
          const blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
          })
          const downloadElement =
            document.createElement('a')
          const href = window.URL.createObjectURL(blob)
          downloadElement.href = href
          downloadElement.download = fileName
          document.body.appendChild(downloadElement)
          downloadElement.click()
          document.body.removeChild(downloadElement)
          window.URL.revokeObjectURL(href)
        })
      } else {
        this.$message.error('请选择下载数据')
      }
    },
    getFileType(name) {
      const startIndex = name.lastIndexOf('.')
      if (startIndex !== -1) {
        return name.slice(startIndex + 1).toLowerCase()
      } else {
        return ''
      }
    },
    beforeUpload(file) {
      // if (file.size / (1024 * 1024) > 10) {
      //   // 限制文件大小
      //   this.$message.warning('当前限制文件大小不能大于10M')
      //   return false
      // }
      const suffix = this.getFileType(file.name) // 获取文件后缀名
      const suffixArray = ['xls', 'xlsx'] // 限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix) === -1) {
        this.$message({
          message: '文件格式错误',
          type: 'error',
          duration: 2000
        })
        return false
      }
      this.$message({
        message: '文件上传成功，请稍后',
        type: 'success',
        duration: 2000
      })
    },
    upload() {
      this.selectFile().then((res) => {
        const file = res.file
        // const name = res.file.name
        // const extension = name.split('.')[1]
        this.beforeUpload(file)
      })
    },
    selectFile(accept) {
      return new Promise((resolve) => {
        const fileInput = document.createElement('input')
        fileInput.type = 'file'
        fileInput.accept = accept
        fileInput.click()
        fileInput.onchange = function (event) {
          const file = event.target.files[0]
          resolve({ message: true, event, file })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  padding: 18px 15px 15px 16px;

  &_main {
    width: 100%;
    background: white;
    padding: 15px 30px;
    border-radius: 2px;

    .line {
      margin-top: 12px;
      width: 1600px;
      height: 1px;
      background: #f1f1f1;
      //margin-bottom: 23px;
    }

    .tab {
      height: 66px;

      .body_left_tab {
        //display: flex;
      }

      display: flex;
      flex-direction: row;
      justify-content: space-between;

      &_item {
        margin-top: 23px;
        font-size: 14px;
        width: 94px;
        height: 28px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        color: #4c565c;
        font-family: PingFang SC;
        position: relative;
      }

      .tab_item:nth-child(3)::before {
        content: '|';
        display: inline-block;
        float: left;
        color: #d0d8e1;
      }

      .tab_item:nth-child(2)::before {
        content: '|';
        display: inline-block;
        float: left;
        color: #d0d8e1;
      }

      &_item:hover {
        color: #497fa3;
      }

      .buttons {
        margin-top: 15px;

        div {
          display: inline-block;
          margin-left: 23px;
          color: #497fa3;
        }
      }

      ::v-deep .el-button {
        background: #497fa3;
        border: 1px solid #497fa3;
        padding: 0;
        width: 80px;
        height: 34px;
        margin-left: 23px;
        //background: #497fa3 !important;
        color: white !important;
        //border: none !important;
        //border-radius: 2px;
      }
    }

    .tab_item_active {
      font-family: PingFang SC;
      color: #497fa3;
      position: relative;
    }

    .tab_item_active::after {
      content: '';
      position: absolute;
      left: 38%;
      bottom: 0;
      width: 24%;
      height: 3px;
      background: #497fa3;
    }

    .building_info {
      &_top {
        display: flex;
        height: 52px;
        justify-content: space-between;
      }

      &_title {
        width: 75px;
        margin-left: 22px;
        margin-top: 14px;
        //position: relative;
        //text-align: center;

        &_left {
          display: inline-block;
          width: 4px;
          height: 14px;
          background: linear-gradient(
            180deg,
            #40ebff,
            #bcf8ff
          );
        }
      }

      //&_title::before {
      //  //position: absolute;
      //  content: '';
      //  display: inline-block;
      //  //float: left;
      //  top: 15%;
      //  width: 4px;
      //  height: 14px;
      //  background: linear-gradient(180deg, #40EBFF, #BCF8FF);
      //}

      &_content {
        margin-left: 22px;
        height: 294px;
        overflow: auto;
      }

      ::v-deep {
        th {
          height: 42px;
          padding: 0;
        }

        tr th:first-of-type label {
          display: none;
        }

        td {
          padding: 0;
        }

        input {
          height: 41px;
          padding: 0;
          border: 0 !important;
        }
      }
    }

    .floor_info {
      &_top {
        display: flex;
        justify-content: space-between;
      }

      &_title {
        margin-left: 22px;
        margin-top: 14px;

        &_left {
          margin-right: 2px;
          display: inline-block;
          width: 4px;
          height: 14px;
          background: linear-gradient(
            180deg,
            #40ebff,
            #bcf8ff
          );
        }
      }

      &_content {
        margin-left: 22px;
        height: 294px;
        overflow: auto;
      }

      ::v-deep {
        th {
          height: 42px;
          padding: 0;
        }

        tr th:first-of-type label {
          display: none;
        }

        td {
          padding: 0;
        }

        input {
          height: 41px;
          padding: 0;
          border: 0 !important;
        }
      }
    }

    .device_info_table {
      height: 637px;
      overflow-y: auto;
    }

    .monitor_device {
      &_top {
        height: 35px;
        display: flex;
        justify-content: space-between;
      }

      &_title {
        margin-left: 22px;
        line-height: 35px;
      }

      &_content {
        margin-left: 22px;
        height: 296px;
        overflow: auto;
        margin-bottom: 20px;
      }

      &_property {
        display: flex;
        flex-direction: row;
        line-height: 42px;
        height: 42px;
        margin-top: 10px;

        ::v-deep {
          input {
            height: 41px;
            padding: 0;
            margin-left: 12px;
            width: 243px;
          }
        }
      }

      ::v-deep {
        th {
          height: 53px;
          padding: 0;
        }

        td {
          padding: 0;
        }

        td:first-of-type label {
          display: none;
        }
      }
    }

    .detection_index {
      &_top {
        display: flex;
        justify-content: space-between;
      }

      &_title {
        line-height: 36px;
      }

      &_content {
        height: 105px;
        overflow: auto;
      }

      ::v-deep {
        th {
          height: 35px;
          padding: 0;
        }

        th:first-of-type label {
          display: none;
        }

        td:first-of-type label {
          display: block;
        }

        td {
          padding: 0;
        }

        input {
          height: 35px;
          padding: 0;
          border: 0 !important;
        }
      }
    }

    .zoning {
      &_top {
        height: 35px;
        display: flex;
        justify-content: space-between;
      }

      &_title {
        line-height: 35px;
        margin-left: 22px;
      }

      &_content {
        margin-left: 22px;
        height: 296px;
        overflow: auto;
      }

      ::v-deep {
        th {
          height: 42px;
          padding: 0;
        }

        tr th:first-of-type label {
          display: none;
        }

        td {
          padding: 0;
        }

        input {
          height: 41px;
          padding: 0;
          border: 0 !important;
        }
      }
    }
  }

  .control {
    display: flex;
    align-items: center;
  }

  .add {
    color: #d3dce6;
    border: 1px solid #d3dce6;
    height: 18px;
    width: 18px;
    margin-right: 10px;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    & > span {
      font-size: 12px;
    }

    &:hover {
      color: #409eff;
    }
  }
}
</style>
